<template>
  <div class="folderList">
    <crumb :list="['知识库服务', '我的知识库']"></crumb>
    <div class="state">
      <conditionalQuery @search="search" :state="false" :filter="false"></conditionalQuery>
    </div>
    <div class="fileTable">
      <div class="fristRow">
        <div class="title">文件库列表</div>
        <div class="addFolder" style="cursor: pointer" @click="addFolder"><i class="iconfont icon-open-folder"></i>新建文件库</div>
      </div>
      <div style="height: calc(100% - 100px)">
        <el-table
          ref="multipleTable"
          :data="sliceTableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="100%"
          :stripe="true"
          class="costomTable"
        >
          <el-table-column type="selection" width="55" align="center"> </el-table-column>
          <!-- <el-table-column type="index" label="序号"> </el-table-column> -->
          <el-table-column prop="libName" label="文件库名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="folderName" @click="$emit('changeKnowledge', scope.row)">
                <img style="margin-right: 5px" src="@/assets/image/icon/wjk.svg" alt="" />{{ scope.row.libName }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="esc" label="简介" show-overflow-tooltip /> -->

          <el-table-column prop="gmtCreated" label="创建时间" show-overflow-tooltip />
          <el-table-column label="创建人" show-overflow-tooltip>{{ userName }}</el-table-column
          >/>
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="operateGroup">
                <div @click="operate(scope.row)"><i class="iconfont icon-bianji" />编辑</div>
                <div @click="deleteFile(scope.row)"><i class="el-icon-delete" style="margin-right: 5px" />删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pageInation :total="total" @handleCurrentChange="handleCurrentChange"></pageInation>
      </div>
    </div>
    <parentDialog title="添加文件库" :visible.sync="dialogVisible" v-if="dialogVisible" height="25%">
      <div class="addFolderDialog">
        <div class="item">
          <div class="lable">名称：</div>
          <el-input v-model="dialogFrom.libName" placeholder="请输入内容"></el-input>
        </div>
        <!-- <div class="item">
          <div class="lable">简介：</div>
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" v-model="dialogFrom.dsc" placeholder="请输入内容"></el-input>
        </div> -->
      </div>
      <div class="btn">
        <el-button size="medium" type="primary" @click="submitFun">提交</el-button>
        <el-button size="medium" @click="dialogVisible = false">取消</el-button>
      </div>
    </parentDialog>
  </div>
</template>
<script>
import pageInation from "@/components/pageInation/index.vue"; // 分页
import parentDialog from "@/components/dialog/parentDialog.vue"; // 弹窗
import { knowledgeListBases, createKnowledge, deleteKnowledge, updateInfoJava } from "@/api/KnowledgeBaseManagement";
import conditionalQuery from "@/components/conditionalQuery/index.vue"; // 查询参数
import crumb from "@/components/pageInation/crumb.vue";

export default {
  components: { parentDialog, conditionalQuery, pageInation, crumb },
  data() {
    return {
      sliceTableData: [],
      fileName: "",
      dialogFrom: {
        libName: "",
        dsc: "",
      },
      params: {
        fileName: "",
      },
      screening: "",
      knowledgeInfo: "", // 文件库详情
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      dialogTitle: "",
      userName: "",
    };
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    // 获取文件列表
    getTableList() {
      this.userName = localStorage.getItem("userName");
      knowledgeListBases({
        size: this.pageSize,
        page: this.currentPage,
        libName: this.params.fileName,
      })
        .then((result) => {
          console.log(result);
          this.sliceTableData = result.data.records;
          this.total = result.data?.total;
        })
        .catch((err) => {});
    },
    submitFun() {
      console.log(this.dialogFrom);
      if (this.dialogFrom.id) this.modify();
      else this.createKnowledgeFun();
    },
    // 添加知识库
    async createKnowledgeFun() {
      createKnowledge({
        knowledgeBaseName: this.dialogFrom.libName,
      })
        .then((result) => {
          if (result.code == 200) {
            this.$message.success(result.msg);
            this.dialogVisible = false;
            this.getTableList();
          }
        })
        .catch((err) => {
          this.dialogVisible = false;
        });
    },
    // 修改知识库提交
    async modify() {
      if (!this.dialogFrom.libName) {
        this.$message.error("文件库名不能为空");
        return;
      }
      updateInfoJava({
        id: this.dialogFrom.id,
        libName: this.dialogFrom.libName,
        info: this.dialogFrom.dsc,
      })
        .then((result) => {
          if (result.code == 200) {
            this.$message.success("修改成功！");
          }
          this.dialogVisible = false;
        })
        .catch((err) => {
          this.dialogVisible = false;
          console.log(err);
        });
    },
    // 分页事件
    handleCurrentChange(item) {
      this.currentPage = item.currentPage;
      this.pageSize = item.pageSize;
      this.getTableList();
    },
    search(obj) {
      let { fileName } = obj;
      this.currentPage = 1;
      this.params.fileName = fileName;
      this.getTableList();
    },
    // 删除
    async deleteFile(row) {
      this.$confirm("确定删除?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      }).then(() => {
        deleteKnowledge({ id: row.id })
          .then((result) => {
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.getTableList();
            }
          })
          .catch((err) => {});
      });
    },
    // 编辑
    operate(row) {
      this.dialogTitle = "修改文件库";
      this.dialogVisible = true;
      this.dialogFrom = row;
      // updateInfoJava({}).then((result) => {
      // }).catch((err) => {
      // });
    },
    addFolder() {
      this.dialogTitle = "添加文件库";
      this.dialogVisible = true;
      this.dialogFrom = {
        libName: "",
        dsc: "",
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.folderList {
  width: 100%;
  height: 100%;
  background: #e6eaf0;
  .goBack {
    margin-bottom: 20px;
    text-align: right;
    cursor: pointer;
  }
  .state {
    background: #fff;
    border-radius: 8px;
    // display: flex;
    // align-items: center;
    .params {
      display: flex;
      align-items: flex-end;
      text-align: left;
      padding: 10px 20px;
      .item {
        margin-right: 20px;
        .lable {
          // line-height: 30px;
          margin-bottom: 8px;
          margin-left: 3px;
        }
      }
    }
  }
  .fileTable {
    background: #fff;
    margin-top: 15px;
    padding: 20px;
    border-radius: 8px;
    height: calc(100% - 130px);
    box-sizing: border-box;
    .fristRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(0, 20, 45, 0.05);
      .title {
        font-family: MiSans, MiSans;
        font-weight: 600;
        color: #00142d;
        line-height: 35px;
      }
      .addFolder {
        font-size: 16px;
      }
    }

    .operateGroup {
      display: flex;
      .iconfont {
        margin-right: 3px;
      }
      > div {
        margin-right: 15px;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
    .folderName {
      display: flex;
      align-items: center;
      > img {
        margin-right: 5px;
      }
      :hover {
        color: #409eff;
      }
      cursor: pointer;
    }
  }
  .addFolderDialog {
    .item {
      display: flex;
      margin: 20px 20px;
      align-items: center;
      .lable {
        min-width: 100px;
        text-align: right;
      }
      .el-textarea,
      .el-input {
        width: 80%;
      }
    }
  }
  .btn {
    margin-top: 40px;
  }
}
</style>
